<template>
    <layoutHeader></layoutHeader>
    <div class="leader-mailbox">
     <div class="title">领导信箱</div>
     <div class="leadermsgNav">
        <div @click="openWrite" style="cursor: default;">
            <img src="@/assets/icon/writeMsg.png">
            <span>我要写信</span>
        </div>
        <div @click="openCheck" style="cursor: default;">
            <img src="@/assets/icon/checkMsg.png">
            <span>来信查询</span>
        </div>
     </div>

     <div class="notice">
        <div class="lTitle">来信需知</div>
        <div class="lxxz">
    <p>欢迎您使用本领导信箱系统向我们反映问题和提出建议,为了确保您的来信能够得到及时有效的处理，请您遵循以下指南：</p>
    <ul class="need-know">
        <li><strong>真实性：</strong>请确保您提供的个人信息和反映的问题真实准确，以便我们能够及时与您联系并解决问题。</li>
        <li><strong>合法性：</strong>请遵守法律法规，不要发送包含违法信息的内容，包括但不限于诽谤、侮辱、色情、暴力等。</li>
        <li><strong>明确性：</strong>请尽量详细描述您的问题或建议，包括相关的时间、地点、人物和事件等要素，以便我们更准确地理解并处理。</li>
        <li><strong>保密性：</strong>我们将严格保护您的个人隐私，不会对外泄露您的个人信息。</li>
        <li><strong>反馈机制：</strong>我们会对您的来信进行审核，并在收到来信后的一定工作日内给予回复。如果问题复杂，处理时间可能会延长，请您耐心等待。</li>
        <li><strong>禁止重复提交：</strong>请不要对同一问题重复提交多封信件，这可能会影响我们的处理效率。</li>
        <li><strong>不受理范围：</strong>本信箱不受理商业广告、个人求职、法律咨询等非公共事务性质的来信。</li>
        <li><strong>技术支持：</strong>如果您在使用信箱过程中遇到任何技术问题，请联系我们的技术支持团队。</li>
    </ul>
    <p>我们感谢您的积极参与和宝贵意见，希望通过这个平台，能够更好地服务市民，共同促进社会的和谐发展。</p>
        </div>
     </div>
    </div>
    <layoutFooter></layoutFooter>


    <!--抽屉-->
      <!--详情抽屉-->
    <el-drawer
          v-model="open"
          title=""
          :append-to-body="true"
          :before-close="handleClose1"
          size="100%"
          class="drawer1"
        >
        
        <div v-if="write" style="margin-top: -8%;">
            <p class="title_small">领导信箱</p>
            <el-form  label-width="auto" id="advice-form" >
    
    <el-form-item label="姓名" prop="name">
      <el-input v-model="writeModel.leaderName" placeholder="请输入领导姓名"></el-input>
    </el-form-item>
    
    <!-- 呈递单位 -->
    <el-form-item label="呈递单位" prop="institution">
    <el-select v-model="writeModel.leaderDep" placeholder="请选择单位">
    <!-- select 选项 -->
    <el-option
    v-for="item in institutions"
    :key="item"
    :label="item"
    :value="item"
    />
    </el-select>
    </el-form-item>
    
    <el-form-item label="内容" prop="description" >
        <el-input
          v-model="writeModel.messageContent"
          :rows="4"
          type="textarea"
          placeholder="请输入"
        />
    <div class="word"><span class="text_count">{{ writeModel.messageContent.length }}</span> / <span class="num_count" id="numCount">1000</span></div>
    </el-form-item>
      <!-- 相关附件 -->
      <el-form-item label="相关附件" >
  
    <div class="fujian">
      <p style="color:#747474;margin:8px">请点击添加附件按钮,将与信访（建议）事项相关的电子文档在此上传。</p>
          <div id="fujian" ></div>
    </div>
    </el-form-item>
                  <!-- <textarea placeholder="请上传文件" class="layui-textarea" lay-verify="required" lay-filter="fujian" name="fujian" id="fujian"></textarea> -->
    <el-form-item  id="upload2">		
        <upload :file-list="fileList" @updateFilename="handleFileName"></upload>
    </el-form-item>
    <!-- 建议人手机号码 -->
    <el-form-item label="投诉人手机号码"  >
      <el-input v-model="captchaModel.phone" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <!-- 短信验证码 -->
    
    <el-form-item label="短信验证码"  >
    <div style="display: flex; align-items: center;">
    <el-input 
    v-model="captchaModel.captcha" 
    placeholder="短信验证码" 
    style="flex-grow: 1;"
    ></el-input>
    <el-button 
    type="button" 
    @click="getCaptcha" 
    id="cap2" 
    style="margin-left: 10px;"
    >发送短信</el-button>
     </div>
    </el-form-item>
    <!-- 提交和重置按钮 -->
    <el-form-item class="buttonbox">
      <el-button type="primary" @click="click1" class="msg-send-btn">提交</el-button>
      <el-button @click="click2" class="msg-send-btn">重置</el-button>
    </el-form-item>
</el-form>

        </div>

        

        </el-drawer>

    </template>

    <script setup>
   import layoutHeader from '@/components/layoutHeader.vue'
  import layoutFooter from '@/components/layoutFooter.vue'
   import router from '@/router';
import { getInfoService } from '@/api/user';
import { usePhoneStore } from '@/stores/phone';

const phoneStore = usePhoneStore();

   const open = ref(false);
  const write = ref(false);

  //打开写信抽屉
const openWrite = ()=>{
    open.value = true;
    write.value = true;
}
  //打开查询抽屉
const openCheck = ()=>{
    router.push('./check')
}

//关闭抽屉
const handleClose1 = ()=>{
    if(write.value){
       write.value = false;
    }
    open.value = false;
}

//写信数据模型
const writeModel = ref({
    "userID": 0,
  "leaderDep": "",
  "messageContent": "",
  "leaderName": ""
})

//获取验证码

//数据模型
const captchaModel = ref({
	phone:'',
	captcha:''
})


const clearCaptchaModel=()=>{
	captchaModel.value={
		phone:'',
		captcha:''
	}
}

const clearWriteModel = ()=>{
    writeModel.value={
        "userID": 0,
  "leaderDep": "",
  "messageContent": "",
  "leaderName": ""
    }
}

const postLetter = async()=>{
    let DataObj = {
        phone:phoneStore.phone
    }
    let userInfo = await getInfoService(DataObj);
    writeModel.value.userID = userInfo.data.userID;
    let result = await postLetter(writeModel.value);
    console.log(result.data);
    
}


const click2=()=>{
	ElMessageBox.confirm(
    '确定重置?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
	clearCaptchaModel();
	clearWriteModel();
      ElMessage({
        type: 'success',
        message: '重置成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}



//
const click1 = () => {
  ElMessageBox.confirm(
    '确定提交?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
	postLetter();
    clearWriteModel();
    clearCaptchaModel();
      ElMessage({
        type: 'success',
        message: '提交成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

    
    
    </script>
    
    <style>
    .leader-mailbox {
    margin-top: 7%;
    font-family: Arial, sans-serif;
    width: 70%;
    height: 60%;
    margin-left: 15%;
    display: flex;
    flex-direction: column;
    }
    
    .title{
        font-size: 30px;
        font-weight: 700;
        color:#666;
        height: 15%;
        width: auto;
    }
    .leadermsgNav{
        margin-top: 1%;
        display: flex;
        height: 17%;
        font-size: 20px;
        width: 100%;
        align-content: center;
    }
    .leadermsgNav div{
        width: 50%;
        align-content: center;
        display: flex;
        color:#1296db;
        padding-left: 15%;
        background-color: rgb(203, 199, 199);
    }
    .leadermsgNav span{
        margin-top:3%;
    }

    .notice{
       width: 100%;
       height: 40%;
       display: flex;
       flex-direction: column;
       
    }
    .lTitle{
        width: 100%;
        padding-left: 4%;
        font-size: 22px;
        color: red;
        font-weight: 600;
        height: 20%;
        border: 2px solid #0585a1;
        background-color: #4ec8e3;
    }
    .lxxz{
        margin-top: 1%;
        width: 100%;
        height:350px ;
        border: 1px solid #666;
        padding-left: 5%;
        padding-right: 5%;
        padding-top:2%;
    }

    body, h1, h2, h3, h4, h5, h6, p, form {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度 */
}

/* 表单容器样式 */
#advice-form {
    font-family: 'Arial', sans-serif;
    max-width: 100%;
    margin: 0% auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    width: 80%; /* 使用百分比设置宽度 */
}

/* 表单项样式 */
.layui-form-item {
    margin-bottom: 1em; /* 为表单项设置底部外边距 */
    display: flex; /* 使用flex布局使元素在同一行 */
    align-items: center; /* 垂直居中对齐 */
}

/* 标签和星号样式 */
.layui-form-label {
    width: 20%; /* 使用百分比设置宽度 */
    padding-right: 1em; /* 为标签和输入框之间添加间距 */
    text-align: right; /* 标签右对齐 */
}

.bitian-xing {
    color: red;
}

/* 输入框和下拉选择框样式 */
.layui-input-inline, .layui-input-block {
    flex-grow: 1; /* 让输入框占据剩余空间 */
    margin-left: 1em; /* 为输入框设置左边距 */
}

.layui-input, .layui-textarea, .layui-select {
    padding: 0.5em; /* 设置内边距 */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* 宽度为100% */
}

/* 单选按钮样式 */
.layui-input-block input[type="radio"] {
    margin-right: 0.5em; /* 为单选按钮设置右边距 */
}

/* 发送验证码按钮和验证码输入框在同一行 */
.layui-form-item .msg-send-btn {
    display: inline-block; /* 使按钮内联显示 */
    margin-left: 1em; /* 为发送验证码按钮设置左边距 */
    padding: 0.5em 1em; /* 设置按钮内边距 */
    background-color: #009688;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 按钮容器样式 */
.layui-form-item.center {
    display: flex;            /* 使用Flexbox布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;      /* 垂直居中对齐 */
}

/* 提交和重置按钮样式 */
.layui-btn {
    padding: 0.5em 1em;      /* 设置按钮内边距 */
    margin: 0 0.5em;         /* 设置按钮之间的外边距 */
    border: none;            /* 移除边框 */
    border-radius: 4px;       /* 设置圆角 */
    cursor: pointer;         /* 鼠标悬停时显示为指针 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
}

.submit-btn {
    background-color: #5FB878; /* 提交按钮的背景颜色 */
    color: white;              /* 文字颜色 */
}

.submit-btn:hover {
    background-color: #4ca866; /* 提交按钮悬浮时的背景颜色 */
}

.cancel-btn {
    background-color: #999;    /* 重置按钮的背景颜色 */
    color: white;              /* 文字颜色 */
}

.cancel-btn:hover {
    background-color: #888;    /* 重置按钮悬浮时的背景颜色 */
}

/* 字数统计样式 */
.word {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
}

/* 代理信息样式 */
.sfdlData {
    display: none; /* 默认隐藏 */
    padding: 1em;
    border-top: 1px solid #eee;
}
.title_small{
    margin-top:8%;
    margin-left:10%;
    color: #666;
    font-size: 25px;
    font-weight: 700;

}

#upload2{
    display: flex;            /* 使用Flexbox布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;
}

.breadcrumb{
	float: left;
	position: absolute;
	top:18%;
	left:80%;
	color: rgb(76, 159, 237);
	cursor: default !important;
}

.breadcrumbtext{
	
	color: rgb(76, 159, 237);
	cursor: default !important;
	font-size: 20px;
	font-weight: 600;
}
 
    </style>